<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width">
    <link href="CSS/facets2.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="JQuery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="JQuery/common.js"></script>
    <script type="text/javascript" src="JQuery/jquery.clip.js"></script>
    <script type="text/javascript" src="JQuery/jquery.facets.js"></script>
    <script type="text/javascript">
       $(document).ready(function() {         
            $('#main-image-box').children().removeClass('facets').end().facets({
                    clipSpacing: 2,
                    minWidth: 25,
                    animationSpeed: 350,
                    minimizeTimeout: 150,
                    sense: true,
                    contentRelations: true,
                    beforeMax: function(index) {
			$('#main-image-box .clip:eq('+index+') .infotext').show();
                    },
                    beforeMin: function(index) {
                            $('#main-image-box .clip:eq('+index+')').find('p').hide().end().find('.infotext').hide();
                    }
            });
    });
    </script>
  </head>
  <body>
    <div id="navigation-panel">
      <div id="main-image-box">
          <div class="clip facets" id="calcio">
              <div class="container">
                <h1>Calcio</h1>
              </div>
          </div>
          <div class="clip facets" id="basket">
              <div class="container">
                  <h1>Basket</h1>
              </div>
          </div>
          <div class="clip facets" id="tennis">
              <div class="container">
                  <h1>Tennis</h1>                  
              </div>
          </div>
          <div class="clip facets" id="eventi">
              <div class="container">
                  <h1>Eventi</h1>
              </div>
          </div>
      </div>
    </div>
  </body>
</html>
